<!--登录界面
作者：张家豪
时间：2020/6/23
-->
<template>
  <div>
          <div>
            <el-form ref="searchForm" :model="searchForm" :inline="true" label-width="60px" >
                <el-col :xl="6" :md="8" :sm="24">
                  <el-form-item label="类型" prop="courseType" >
                            <el-select v-model="searchForm.courseType"  placeholder="请选择课程类型">
                              <el-option
                                v-for="item in courseType"
                                :key="item"
                                :label="item"
                                :value="item">
                              </el-option>
                            </el-select>
                  </el-form-item>
                  </el-col>
                  <el-col :xl="6" :md="8" :sm="24">
                  <el-form-item label="课程名" prop="title">
                    <el-input placeholder="请输入课程名" v-model="searchForm.courseName" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xl="6||24" :md="8||24" :sm="24">
                  <el-form-item>
                    <div :style=" { float: 'right', overflow: 'hidden' } || {} ">
                      <el-button icon="el-icon-search" type="primary" @click="search">搜索</el-button>
                      <el-button class="ml-5" icon="el-icon-refresh-left" @click="reset">重置</el-button>
                      <el-button type="primary" icon="el-icon-plus" size="small" @click="add()">新增类型</el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-form>
          </div>
          <div >

          </div>
          <page-table @load-table-data="loadTableData" ref="dataTable" @selection-change="selection"
                          row-key="id">
            <template slot="tb-columns">
              
              <el-table-column align="center" prop="avatarUrl" label="课程封面" width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.avatarUrl" width="80" height="80"/>
                    </template>
                </el-table-column>
              <el-table-column align="center" prop="courseName" label="课程名" ></el-table-column>
              <el-table-column align="center" prop="courseType" label="课程类型"></el-table-column>
              <el-table-column align="center" label="状态" :formatter="stateFormat"></el-table-column>
              <el-table-column align="center" prop="createTime" label="创建时间" sortable></el-table-column>
          
              <el-table-column fixed="right" align="center" width="180" label="操作">
                <template slot-scope="scope">
                   <el-button type="primary" @click="edit(scope.row)"  round>编辑</el-button>
                 <el-divider direction="vertical"></el-divider>
                  <el-button type="danger"  @click="remove(scope.row.id)"  round>删除</el-button>
                </template>
              </el-table-column>
            
            </template>
          </page-table>

   
  <Edit_type :visible='visible' :title="title" :defaultFormData='defaultFormData' 
  v-if='visible' @close = 'close'/>
  <Edit_add :visible='visible_add' :title="title" :defaultFormData='defaultFormData' 
  v-if='visible_add' @close = 'close'/>
  </div>
</template>

<script>

import PageTable from '@/components/common/PageTable'
import {getCookie} from '@/libs/cookie'
import {selectpage,remove} from '@/api/modules/create_class'
import {select} from '@/api/modules/courseType'
import Edit_type from './edit-type'
import Edit_add from './add-type'

export default {
    name: 'book',
    components:{PageTable,Edit_type,Edit_add},
   data() {

      return {
        username:'',
        courseType:[],
        searchForm:{
        courseType:'',
        courseName:''
        },

        multipleSelection: [],
        visible: false,
        visible_add: false,
        title:'',
        defaultFormDate:{},
        
      };
    },
    mounted(){
      let user = JSON.parse(getCookie("user") || '{}');
      this.username = user.nickname
      this.getType()
    },
    methods: {

        remove(id) {
                //弹窗询问是否删除
                this.$confirm('此操作将永久删除该课程及其相关信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove(id).then(res => {
                        this.toast(res.message)
                        //重新刷新表单数据
                        this.$refs.dataTable.loadTableData('reload')
                    })
                })
            },
      //课程类型下拉实现
       getType(filter){
          select(null).then(res =>{
              this.courseType = res.data.courseTypelist
          })
       },
      close(val){
        this.visible = false
        this.visible_add = false
        if(val){
          this.getType()
          this.$refs.dataTable.loadTableData('reload')
        }
      },
      add(){
        this.visible_add = true
        this.title = '新增课程类型'
        this.defaultFormData = {}
      },
      edit(row){
        //console.log(row)
        this.visible = true
        this.title = '编辑'
        this.defaultFormData = row
      },

      stateFormat(row){
        if(row.status===1){
          return '开课'
        }else{
          return '停开课'
        }
      },
      loadTableData(filter,callback){
          filter = {
            ...filter,
            ...this.searchForm
          }

          selectpage(filter).then(res => {
            this.total = res.data.total
            let tableData = {
              ...res.data,
              data: res.data.records
            }
            console.log("11")
            console.log(tableData)
            callback(tableData)
            
          })
        },
      selection(val){
        this.multipleSelection = val;
      },
      search(){
        this.$refs.dataTable.loadTableData('reload')
      },
      reset() {
        this.$refs.searchForm.resetFields()
        this.$refs.dataTable.loadTableData('reload')
      },
    }
};
</script>

<style scoped>
  html,body{
    padding: 0;
    margin: 0;
  }
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }

</style>